<template>
<div class="page">
  <nav-top title='我的收货地址'>
  </nav-top>
  <xl-footer>
    <button @click='goAddAddress' class='btn-add-address'>
      新增收货地址</button>
  </xl-footer>

  <page-content>
  <div class="address-list">
    <address-list-item v-for="(item,index) in myAddressList" :key='index' :data='item' 
    @click.native="showAction(index)" v-if="myAddressList"></address-list-item>
    <div class="row" v-if="!myAddressList">
      亲您一个收货地址都没有哦！请添加！
    </div>
  </div>
  </page-content>
  <actionsheet 
    v-model='show'
    :menus="menus" 
    @on-click-menu="addressEdit"
    show-cancel
    ></actionsheet>
</div>

</template>

<script>
  import navTop from '@c/header/navTop'
  import pageContent from '@c/pagecontent'
  import xlFooter from '@c/footer.vue'
  import AddressListItem from '@c/addressList/addressListItem.vue'
  import {Actionsheet, Alert} from 'vux'
  import {getAddress} from '../../config/api.js'
  export default{
    name:'myAddress',
    components:{
      navTop,
      pageContent,
      xlFooter,
      AddressListItem,
      Actionsheet,
      Alert
    },
    data(){
      return {
        myAddressList:[],
      menus:[
        {
          label: '使用此地址',
          type: 'primary',
          value: 1
        },
        {
          label: '设为默认地址',
          type: 'primary',
          value: 2
        },
        {
          label: '删除',
          type: 'warn',
          value: 3
        }
      ],
      show:false,
      alerText:'',
      current:0
      }
    },
    methods:{
      goAddAddress(){
        this.$router.push('add-address')
      },
      showAction (index) {
        this.show = true
        this.current = index
      },
      addressEdit (key) {
        const _this = this
        let current = this.myAddressList[this.current]
          console.log(current.def,'key',key)
        if(key == 3 && current.def == 1){
            _this.$vux.alert.show({
              title:'注意',
              content:"当前默认地址不能直接删除！请设置其他地址为默认地址后再删除！"
            })
        }else if(key === 1){

        }
      }
    },
    watch:{
    },
    beforeRouteEnter (to,from,next) {
      next(vm=>{
        let uid = vm.$store.state.user_id

        getAddress({user_id:uid}).then(res=>{
          console.log(res)
          vm.myAddressList = res.data.itemList
        })
      })
    }
  }
</script>

<style lang="scss">
@import '../../sass/_var.scss';
.btn-add-address{
  text-align: center;
  font-size:36px;/*px*/
  // font-weight: 600;
  position: absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  margin: auto;
  background-color: #fff;
  width: 50%;
  color:$ora;
  // line-height: 98px;
  .icon-plus{
    // display: inline-block;
    &::before{
    content:"+";
    height: 36px;/*px*/
    width:36px;/*px*/
    display: inline-block;
    color:#fff;
    background-color: $ora;
    border-radius: 50%;
    line-height: .9;
    margin-right: 10px;/*px*/
  }
  }
}
</style>